<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery.overscroll</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #overscroll { width: 500px; height: 500px; overflow: hidden; border: solid 1px #000; margin: 30px auto; position: relative; }
            #overscroll ul { width: 2500px; margin:0; padding: 0; }
            #overscroll li { display: block; float: left; background-color: #FFF; }
            #overscroll li.alt { background-color: #C00; }
            #overscroll li.no-drag { background-color: #000; color: #FFF; }
            #overscroll li.last { clear: both; visibility: hidden; height: 0; padding: 0; }
        </style>
    </head>

    <body>
        <h1>jQuery.overscroll</h1>

        <div id="overscroll">
            <ul class="thumbnails">
                <li >
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/160x120" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>   
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/160x120" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/360x268" alt="">
                    </a>
                </li>
            </ul>
        </div>



        <script src="<%=request.getContextPath()%>/bootstrap/js/jquery.js"></script>
        <script src="<%=request.getContextPath()%>/overscroll/jquery.overscroll.js"></script>
        <script>
            $(function(o){	
                o = $("#overscroll").overscroll({
                    cancelOn: '.no-drag',
                    //hoverThumbs: true,
                    //persistThumbs: true,
                    //showThumbs: false,
                    scrollLeft: 200,
                    scrollTop: 100
                }).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
                    console.log(event.type);
                });
                $("#link").click(function(){
                    if(!o.data("dragging")) {
                        console.log("clicked!");
                    } else {
                        return false;
                    }
                });
            });
        </script>
    </body>
</html>
